<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.js"></script>
	</head>

	<body>
		<!--
			1：双大括号绑定数据变量和指令v-text功能一样，不会解析变量内容
				而v-html指令则会解析该变量，会解析标签进行渲染
			2：{{}}，v-text，v-html中都可以进行js表达式运算
			
		-->

		<div class="app">
			<div v-text="name+123"></div>
			<div v-html="name+123"></div>
			{{name+123}}
			<input type="text" name="" id="" value="" v-model="name" />
			<textarea name="" rows="" cols="" v-model="name"></textarea>
			<div v-bind:title="name" v-on:click="fun1">点我</div>
			<div :title="name" @click="fun1">点我</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: ".app",
				data: {
					name: "<h1>Dell</h1>",
					name1: "Dell"
				},
				methods:{
					fun1:function(){
						alert(this.name)
					}
				}
			})
		</script>
	</body>

</html>